<template>
    <div id="searchFriend">
        <nut-row>
            <nut-col :span="24">
                <div>
                    <nut-navbar class="bg" @on-click-back="back"  :rightShow="false">
                        搜索列表
                    </nut-navbar>
                </div>
            </nut-col>
        </nut-row>

        <nut-row>
            <nut-col :span="24">
                <div style="padding: 0 5px;border: 1px #2c3e50 solid;">
                    <nut-searchbar
                            v-model="val"
                            placeText="输入好友名称"
                            @submit="submitFun"
                    ></nut-searchbar>
                </div>
            </nut-col>
        </nut-row>

        <nut-infiniteloading
                @loadmore="onInfinite"
                :is-show-mod="true"
                :has-more="isHasMore"
                :is-loading="isLoading"
                :threshold="200">
            <ul class="list">
                <li class="list-item" v-for="item of data" :key="item.id" v-on:click="chat(item.id)">
                    <nut-row :gutter="10" align="center" class="warp">
                        <nut-col :span="8">
                            <nut-avatar class="warp-avatar" size="large" :bg-icon="item.avatar"></nut-avatar>
                        </nut-col>
                        <nut-col :span="16" class="warp-name">
                            <span class="warp-span">{{item.name}}</span>

                            <nut-button
                                    type="gray"
                                    shape="circle"
                                    small
                                    @click="joinFriend(item.id)"
                            >
                                加为好友
                            </nut-button>
                        </nut-col>
                    </nut-row>
                </li>
            </ul>
        </nut-infiniteloading>
    </div>
</template>

<script>
    import { FriendSearch, FriendAdd } from '@/api/friend'
    export default {
        name: "searchFriend",
        data(){
            return {
                val: "",
                data: [
                ],
                isHasMore: false,
                isLoading: false,
            }
        },
        methods: {
            back() {
                this.$router.back()
            },
            onInfinite() {
                this.isLoading = true;
            },
            // 搜索好友
            submitFun(data) {
                if (data !== "") {
                    var dd = {
                        user_name: data
                    }
                    FriendSearch(dd).then(res => {
                        if (res.code === 1) {
                            this.data = res.data
                        }
                    }).catch()
                }
            },
            // 加为好友
            joinFriend(user_id) {
                var dd = {
                    user_id: user_id
                }
                FriendAdd(dd).then(res => {
                    console.log(res.data)
                    this.$toast.success(res.message, {
                        duration: 1000,
                    })
                }).catch()
            }
        }
    }
</script>

<style scoped lang="css">
    .bg {
        background: rgb(69, 193, 160);
        color: #FFFFFF;
    }

    .warp {
        background: darkgray;
        margin-top: 5px;
        height: 50px;
        text-align: center;
        padding-top: 10px;
    }

    .warp_live {
        background: green;
    }

    .warp-name{
        text-align: left;
    }
    .warp-span {
        display: inline-block;
        height: 50px;
        line-height: 40px;
        width: 60px;
        padding-left: 0px;
    }
</style>